<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="pd-30 ">
			<view class="title ft fw-800" @click="toReduce">{{ '我的分享减免' }}</view>
			<view class="ft c-99 mt-20">{{ '可用减免券（只能选择一种）' }}</view>
		
			<scroll-view class="scroll-view mt-20" scroll-y="true" @scroll="scroll" scroll-top="0">
				<view class="flex mb-20" v-for="(item) in reduceList" :key="item.id" @click="checkReduce(item)">
					<view class="left">
						<text class="tip pd-8 c-ff  ft ft-20">分享减免</text>
						<view class="mt-10 jia">
							<view class="ft1">￥{{ item.reduce }}</view>
							<view class="ft">分享阅读立减券</view>
						</view>
					</view>
					<view class="right flex-bwt pd-20">
						<view class="ml-20 mt-10">
							<view class="ft1 ft-24">{{ item.product_name+'可用（部分商品可用（同类型券不可叠加）' }}</view>
							<view class="ft mt-12 c-99">{{ item.start_time+' ~ '+item.end_time}}</view>
						</view>
						<image class="mr-10" style="width: 30rpx;height: 30rpx;flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="item.id==checkReduceData.id">
						</image>
						<image class="mr-10" style="width: 30rpx;height: 30rpx;flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
							v-if="item.id!=checkReduceData.id"></image>
					</view>
				</view>
				<view class="com-empty" v-if="reduceList.length==0">暂无数据</view>
			</scroll-view>
		</view>
		<view style="height: 166rpx;"></view>
		<view class="confirm pd-10 flex-center">
			<view class="allPrice flex">
				<text class="ft1 ml-20 ft-22">{{ "已选优惠￥" }}</text>
				<text class="ft-num ft-44">{{ checkReduceData?.reduce??'0.00' }}</text>
				<text class="ft1 ft-22">{{ "元" }}</text>
			</view>
			<view class="submit ml-20 flex-center ft1 c-dbf" @click="sub">确定</view>
		</view>
	</view>
</template>
<script setup lang="js">
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from "vue";
	import {
		utils
	} from "@/utils/utils.js";
	import {
		api
	} from "@/utils/api.js";
	
	import navHead from '@/components/navHead.vue';
	const headData = reactive({
		color: '#fff',
		title: '分享减免使用'
	})
	
	const {
		proxy
	} = getCurrentInstance();

	const checkReduceData = ref({})
	const check_reduce_id = ref(-1)
	const reduceList = ref([])
	onLoad((options) => {
		const eventChannel = proxy.getOpenerEventChannel();
		// 接收数据
		eventChannel.on('toDetail', (data) => {
			reduceList.value = data.share_reduce_list
			data.share_reduce_list.forEach(item => {
				if (item.is_check == 1) {
					checkReduceData.value = item
					check_reduce_id.value = item.id
				}
			})
		});
	})

	const checkReduce = (item) => {
		if (item.id == check_reduce_id.value) {
			checkReduceData.value = {}
			check_reduce_id.value = -1
		} else {
			checkReduceData.value = item
			check_reduce_id.value = item.id
		}
	}

	const sub = () => {
		const eventChannel = proxy.getOpenerEventChannel();
		eventChannel.emit('fromDetail', {
			reduce_id: check_reduce_id.value,
			checkReduceData:checkReduceData.value
		});
		uni.navigateBack(-1)
	}

	const toReduce = () => {
		uni.navigateTo({
			url: "/subpackage/shareReduction/shareReduction"
		});
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: right;
	}

	.tab {
		width: 124rpx;
		height: 72rpx;
		background: #F8F8F8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #666666;
	}

	.active {
		background: #DBF046;
		color: #333333;
	}

	.scroll-view {
		//   border: 2rpx solid red;
		height: 1130rpx;

		.left {
			width: 182rpx;
			height: 144rpx;
			background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			.tip {
				//  width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 20rpx 8rpx 8rpx 8rpx;
			}

			.jia {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.noDate {
			background: #F1F1F1;
		}

		.right {
			width: 508rpx;
			height: 144rpx;
			background: #F8F8F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.confirm {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 10rpx;
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.allPrice {
			width: 478rpx;
			height: 78rpx;
			background: #DBF046;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}

		.submit {
			width: 192rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
</style>